<template>
	<view>
		<view v-if="(propData || null) != null" class="bottom-nav bottom-line-exclude">
			<block v-for="(item, index) in propData" :key="index">
				<view class="nav-item" :data-value="item.event_value" :data-type="item.event_type" @tap="navigation_event">
					<view v-if="propStatus == item.xu" class="on">
						<image class="topavatar" :src="item.icon_active" />
						<text class="title" :style="'color:'+foot_color">{{item.name}}</text>
					</view>
					<view v-else>
						<image class="topavatar" :src="item.icon" />
						<text class="title">{{item.name}}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {classinfo_base_info} from '@/pages/fcc/classinfo/public/common.js';
	var static_url = app.globalData.get_static_url('classinfo', true);
	export default {
		data() {
			return {
				static_url: static_url,
				data_base: null,
				foot_color: '#ff4e92'
			}
		},
		props: {
		    propStatus: {
		    	type: [Number,String],
		    	default: 0
		    },
			// 数据
			propData: {
			    type: [Array, Object, String],
			    default: null,
			},
		},
		// 页面被展示
		created: function () {
			this.init_config();
		},
		methods: {
			init_config(){
				classinfo_base_info()
				.then(data=>{
					this.setData({
						data_base: data
					});
				});
			},
			navigation_event(e) {
			    app.globalData.operation_event(e);
			}
		}
	}
</script>
<style>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #e0e0e0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 99;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
}

.nav-item text {
  font-size: 20rpx;
  margin-top: 4rpx;
  color:#8a8a8a;
}

.nav-item .topavatar {
    width: 50rpx;
    height: 50rpx;
    display: block;
    margin: auto;
}
</style>
